<template>
  <div class="app-container">
    <!-- 查询条件 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="交易订单号" prop="orderNo">
        <el-input v-model="queryParams.orderNo" placeholder="请输入交易订单号" style="width: 240px;" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">全链路搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格数据 -->
    <el-row>
      <el-col :span="24">
        <div class="tipTop">
          <p><b>数据链路完整性列表</b></p>
        </div>
        <el-table
          cell-class-name="col-table-item"
          highlight-current-row
          :data="trackingTable"
          height="400"
          border
          style="width: 100%">
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="direction" label="方向" width="50">
            <template slot-scope="scope">
              <li v-if="scope.row.directionType==='F'" class="el-icon-bottom" style="color: green;"></li>
              <li v-if="scope.row.directionType==='R'" class="el-icon-top" style="color: orangered;"></li>
            </template>
          </el-table-column>
          <el-table-column prop="business" label="业务名称" width="180"></el-table-column>
          <el-table-column prop="status" label="数据链路进度">
            <template slot-scope="scope">
              <el-progress :percentage="scope.row.status" :color="customColorMethod"></el-progress>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="150">
            <template slot-scope="scope">
              <el-button icon="el-icon-search" size="small" round @click="scrollToSection('section2',scope.row)">{{scope.row.business}}查询</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="tip" id="section2" >
          <p><b>交易业务数据：</b>包括交易核心主单数据、子单明细数据以及优惠明细数据等。</p>
        </div>
        <el-tabs type="border-card">
          <el-tab-pane label="交易核心">
            <el-table
              :data="tableData"
              height="250"
              border
              style="width: 100%">
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column prop="date" label="日期" width="180"></el-table-column>
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="tip">
          <p><b>支付线业务数据：</b>包括支付主单数据、子单明细数据、优惠明细、以及分账数据、交易退款等数据。</p>
        </div>
        <el-tabs type="border-card">
          <el-tab-pane label="支付核心">
            <el-table
              :data="tableData"
              height="250"
              border fit
              style="width: 100%">
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column prop="date" label="日期" width="120"></el-table-column>
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="address" label="地址" width="200" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="address1" label="地址1"></el-table-column>
              <el-table-column prop="address2" label="地址2"></el-table-column>
              <el-table-column prop="address3" label="地址3"></el-table-column>
              <el-table-column prop="address4" label="地址4"></el-table-column>
              <el-table-column prop="address5" label="地址5"></el-table-column>
              <el-table-column prop="address6" label="地址6"></el-table-column>
              <el-table-column prop="address7" label="地址7"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="分账管理">
            <el-table
              :data="tableData"
              height="250"
              border fit
              style="width: 100%">
              <el-table-column type="index" width="50" fixed></el-table-column>
              <el-table-column prop="date" label="日期" width="180"></el-table-column>
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="address" label="地址" width="200" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="address1" label="地址1"></el-table-column>
              <el-table-column prop="address2" label="地址2"></el-table-column>
              <el-table-column prop="address3" label="地址3"></el-table-column>
              <el-table-column prop="address4" label="地址4"></el-table-column>
              <el-table-column prop="address5" label="地址5"></el-table-column>
              <el-table-column prop="address6" label="地址6"></el-table-column>
              <el-table-column prop="address7" label="地址7"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="退款管理">退款管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
        </el-tabs>

      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="tip">
          <p><b>资金清分业务数据：</b>包括资金清分数据、子单明细数据、优惠明细、以及清分明细数据、清分退款等数据。</p>
        </div>
        <el-tabs type="border-card">
          <el-tab-pane label="清分订单">
            <el-table
              :data="tableData"
              height="250"
              border fit
              style="width: 100%">
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column prop="date" label="日期" width="120"></el-table-column>
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="address" label="地址" width="200" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="address1" label="地址1"></el-table-column>
              <el-table-column prop="address2" label="地址2"></el-table-column>
              <el-table-column prop="address3" label="地址3"></el-table-column>
              <el-table-column prop="address4" label="地址4"></el-table-column>
              <el-table-column prop="address5" label="地址5"></el-table-column>
              <el-table-column prop="address6" label="地址6"></el-table-column>
              <el-table-column prop="address7" label="地址7"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="清分明细">
            <el-table
              :data="tableData"
              height="250"
              border fit
              style="width: 100%">
              <el-table-column type="index" width="50" fixed></el-table-column>
              <el-table-column prop="date" label="日期" width="180"></el-table-column>
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="address" label="地址" width="200" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="address1" label="地址1"></el-table-column>
              <el-table-column prop="address2" label="地址2"></el-table-column>
              <el-table-column prop="address3" label="地址3"></el-table-column>
              <el-table-column prop="address4" label="地址4"></el-table-column>
              <el-table-column prop="address5" label="地址5"></el-table-column>
              <el-table-column prop="address6" label="地址6"></el-table-column>
              <el-table-column prop="address7" label="地址7"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="清分退款">退款管理</el-tab-pane>
        </el-tabs>

      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="tip">
          <p><b>资金结算业务数据：</b>包括资金结算数据、子单明细数据、优惠明细、以及结算明细数据、结算退款等数据。</p>
        </div>
        <el-tabs type="border-card">
          <el-tab-pane label="结算订单">
            <el-table
              :data="tableData"
              height="250"
              border fit
              style="width: 100%">
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column prop="date" label="日期" width="120"></el-table-column>
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="address" label="地址" width="200" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="address1" label="地址1"></el-table-column>
              <el-table-column prop="address2" label="地址2"></el-table-column>
              <el-table-column prop="address3" label="地址3"></el-table-column>
              <el-table-column prop="address4" label="地址4"></el-table-column>
              <el-table-column prop="address5" label="地址5"></el-table-column>
              <el-table-column prop="address6" label="地址6"></el-table-column>
              <el-table-column prop="address7" label="地址7"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="结算明细">
            <el-table
              :data="tableData"
              height="250"
              border fit
              style="width: 100%">
              <el-table-column type="index" width="50" fixed></el-table-column>
              <el-table-column prop="date" label="日期" width="180"></el-table-column>
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="address" label="地址" width="200" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="address1" label="地址1"></el-table-column>
              <el-table-column prop="address2" label="地址2"></el-table-column>
              <el-table-column prop="address3" label="地址3"></el-table-column>
              <el-table-column prop="address4" label="地址4"></el-table-column>
              <el-table-column prop="address5" label="地址5"></el-table-column>
              <el-table-column prop="address6" label="地址6"></el-table-column>
              <el-table-column prop="address7" label="地址7"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="结算退款">退款管理</el-tab-pane>
        </el-tabs>

      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div class="tip">
          <p><b>履约业务数据：</b>包括履约业务状态、履约时间等数据。</p>
        </div>
        <el-tabs type="border-card">
          <el-tab-pane label="履约订单">
            <el-table
              :data="tableData"
              height="250"
              border fit
              style="width: 100%">
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column prop="date" label="日期" width="120"></el-table-column>
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="address" label="地址" width="200" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="address1" label="地址1"></el-table-column>
              <el-table-column prop="address2" label="地址2"></el-table-column>
              <el-table-column prop="address3" label="地址3"></el-table-column>
              <el-table-column prop="address4" label="地址4"></el-table-column>
              <el-table-column prop="address5" label="地址5"></el-table-column>
              <el-table-column prop="address6" label="地址6"></el-table-column>
              <el-table-column prop="address7" label="地址7"></el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="履约明细">
            <el-table
              :data="tableData"
              height="250"
              border fit
              style="width: 100%">
              <el-table-column type="index" width="50" fixed></el-table-column>
              <el-table-column prop="date" label="日期" width="180"></el-table-column>
              <el-table-column prop="name" label="姓名" width="180"></el-table-column>
              <el-table-column prop="address" label="地址" width="200" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="address1" label="地址1"></el-table-column>
              <el-table-column prop="address2" label="地址2"></el-table-column>
              <el-table-column prop="address3" label="地址3"></el-table-column>
              <el-table-column prop="address4" label="地址4"></el-table-column>
              <el-table-column prop="address5" label="地址5"></el-table-column>
              <el-table-column prop="address6" label="地址6"></el-table-column>
              <el-table-column prop="address7" label="地址7"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>

      </el-col>
    </el-row>

    <!-- 以下是对话框 -->
  </div>
</template>

<script>
import { orderTrackViewByCode, orderTrackViewByQueryCodes } from "@/api/sm/order/tracking";

export default {
  name: "Orderinfo",
  dicts: ['order_status'],
  data() {
    return {
      trackingTable: [
        {
          direction: "方向",
          directionType: "F",
          status: 40,
          business: "交易链路",
          trackingList: [
            {
              trackingName: "交易明细",
              queryCode: "queryOrder"
            }
          ]
        },
        {
          direction: "方向",
          directionType: "F",
          status: 50,
          business: "支付链路",
          trackingList: [
            {
              trackingName: "支付核心",
              queryCode: "queryPaymentByOrderNo"
            }
          ]
        },
        {
          direction: "方向",
          directionType: "F",
          status: 60,
          business: "清分链路",
          trackingList: [
            {
              trackingName: "支付核心",
              queryCode: "queryPaymentByOrderNo"
            }
          ]
        },
        {
          direction: "方向",
          directionType: "F",
          status: 60,
          business: "结算链路",
          trackingList: [
            {
              trackingName: "结算订单",
              queryCode: "queryPaymentByOrderNo"
            }
          ]
        },
        {
          direction: "方向",
          directionType: "R",
          status: 60,
          business: "退款链路",
          trackingList: [
            {
              trackingName: "退款核心",
              queryCode: "queryPaymentByOrderNo"
            }
          ]
        },
        {
          direction: "方向",
          directionType: "F",
          status: 70,
          business: "履约链路",
          trackingList: [
            {
              trackingName: "履约查询",
              queryCode: "queryAgreementByOrderNo"
            }
          ]
        }
      ],
      showSearch: true,
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        mplanStatus: 0,
        planMonth: null,
        planDate: null,
        orderNo: null,
      },

      tipContent: "",
      bigPanList: [],
      columnList:[],

      tableData: [],
    };
  },
  created() {
    this.tipContent = this.$createElement('div', { domProps: { innerHTML: `排产数量/已完工数量<br/>生产进度<br/>合同号<br/>产品名称<br/>产品编码` } });
    this.init();
  },
  methods: {
    scrollToSection(sectionId, row) {
      const element = document.getElementById(sectionId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
      console.log('行对象数据:', row);
      this.querySingleTrackingList(row);
    },

    // load(tree, treeNode, resolve) {
    //   console.log(tree);
    //   let data = {
    //     "parentBomCode": tree.bomCode,
    //     "productId": tree.productId,
    //     "orderCode": tree.orderCode,
    //     "customName": tree.customName,
    //     "sampleNum": tree.sampleNum ? tree.sampleNum : 0,
    //     "workerOrdernum": tree.workerOrdernum ? tree.workerOrdernum : 0,
    //     // "semiProductPlanNum": tree.semiProductPlanNum ? tree.semiProductPlanNum : tree.planNum
    //   };
    //   listChildren(data).then((res) => {   //getChildMenu是我们自己的调用后台的封装
    //     resolve(                            //resolve是组件的
    //       res.data  //根据自己的格式,将查到的子菜单数组填充
    //     )
    //   })
    // },
    format(percentage) {
      return `完成度: ${percentage}%`;
    },
    customColorMethod(percentage) {
      if (percentage < 10) {
        return '#f56c6c';
      } else if (percentage < 30) {
        return '#909399';
      } else if (percentage < 70) {
        return '#e6a23c';
      } else {
        return '#67c23a';
      }
    },
    handleCellClick(row, column, event) {
      const cellValue = row[column.property];
      const detail = row[`detail_${column.property}`];
      console.log('Cell value:', cellValue);
      console.log(detail);
    },
    handleRowClick(row) {
      console.log('row value:', JSON.stringify(row));
    },
    handleDisable(row, index) {
      if (row.mplanStatus == '1') {
        return false
      } else {
        return true
      }
    },
    getCellStyles(row, prop) {
      let style = {};
      let detail = row[`detail_${prop}`];// 有可能有 undefined 对象，因为有些日期的产品多，有些日期的产品少
      if (detail && detail.bgColor) {
        style.backgroundColor = detail.bgColor;
      }
      // style.color = "black";
      return style;
    },
    init() {
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份需要加1，然后确保是两位数
      const day = currentDate.getDate().toString().padStart(2, '0'); // 获取日并确保是两位数
      this.queryParams.planMonth = `${year}-${month}`;
      this.queryParams.planDate = `${year}-${month}-${day}`;
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
    },

    // 并发执行请求接口
    // async fetchList(item) {
    //   let invokeApi = [];
    //   for (let track of this.trackingTable) {
    //     if (track.business !== "交易链路") {
    //       continue;
    //     }
    //     for (let trackOne of track.trackingList) {
    //       invokeApi.push(plimit(this.orderTrackViewByCode(item).then(res => {
    //         console.log("并发返回:", res);
    //       })));
    //     }
    //   }
    //   const [trade] = await Promise.all(invokeApi);
    //   console.log("同步全部执行完成:", trade);
    //   // const [trade, pay, clear, settle, refund, agreement] = await Promise.all(invokeApi);
    // },

    // 查询单个链路数据
    querySingleTrackingList(row) {
      if(!row.trackingList) {
        alert(`无跟踪查询原始链路数据，请配置号再进行数据查询`);
        return;
      }
      let item = {
        "orderId": "240326001101077701162619"
      };
      // this.fetchList(item);
    },
    // 查询全链路数据
    queryAllTrackingList() {
    },
  }
};
</script>
<style type="text/css">
  .el-progress-bar__innerText {
    color: white;
  }

  .app-container .tipTop {
    padding: 4px 8px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-top: 5px solid #50bfff;
    margin: 2px 0;
  }
  .app-container .tipTop p {
    text-align: center;
    font-size: 12px;
    color: #5e6d82;
    line-height: 1.5em;
  }
  .app-container .tip {
    padding: 4px 8px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 4px 0;
  }
  .app-container p {
    font-size: 12px;
    color: #5e6d82;
    line-height: 1.5em;
  }
</style>
